<template>
  <div style="width:100%; ">
    <div id="accordionRow">
      <div class="card">
        <div class="card-header-edit">
          <a class="card-link" data-toggle="collapse" href="#collapse0" v-on:click="handleRow(0)">
            网格
            <span class="float-right">
              <icon v-show="rowStatus[0]" name="angle-up"></icon>
              <icon v-show="!rowStatus[0]" name="angle-down"></icon>
            </span>
          </a>
        </div>
        <div id="collapse0" class="collapse show" data-parent="#accordionRow">
          <div class="card-body">
            #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'EditRow',
  data () {
    return {
      data: [3, 6, 3, 1],
      rowStatus: [1, 1, 1, 1]
    }
  },
  methods: {
    handleRow: function (idx) {
      Vue.set(this.rowStatus, idx, 1 - this.rowStatus[idx]);
    }
  }
}

</script>

<style scoped>
  .card-header-edit{ padding: .75rem 1.25rem; margin-bottom: 0; }

</style>
